<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>歌词 - 抖音风格</title>
    <script src="https://lib.baomitu.com/jquery/3.1.1/jquery.min.js"></script>
    <style>
        ::-webkit-scrollbar {
            display: none;
        }

        html,
        body,
        #view {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            font-size: 16px;
            overflow: hidden;
        }

        

        .curr {
            position: absolute;
            top: 50%; left: 50%;
            width: 18em;
            transform: translate(-50%,-50%);
        }
        .other {
            display: inline-block;
            position: absolute;
            transition:2s;
        }
        #curr>p{
            color: red;
        }
        p {
            margin: 0px;
            text-align: center;
            word-break: keep-all;
        }
    </style>
</head>

<body>
    <div id="view">
        <div id="curr"></div>
    </div>
</body>
<script>
    var list = [
        { content: "我仍试" },
        { content: "我苦笑撑到最后"  },
        { content: "我笑容的背后留着眼泪" },
        { content: "我仍试" },
        { content: "我背后留仍试" },
        { content: "我笑容的背后留着眼泪" },
        { content: "我仍试" },
        { content: "我背后留仍试" },
    ];
    var $view = $("#view"), i = 0;
    var styleArray = [
        { transform: "translate(0%,-100%)", transformOrigin: "center center" },
        { transform: "rotate(90deg)", transformOrigin: "right bottom", transition:"2s" },
        { transform: "rotate(-90deg)", transformOrigin: "left bottom" },
    ];
    function next() {
        var item = list[i];
        var fontSize = 18/item.content.length, style = styleArray[ Math.floor(Math.random()*3) ];
        var $curr = $("#curr").removeAttr("id").removeClass("curr").addClass("other").css(style);
        $curr = $("<div>").attr("id","curr").addClass("curr").append($curr);
        $("<p>").text(item.content).appendTo($curr).animate({ fontSize: fontSize+"em" },500);
        $view.html(null).append($curr);
        // $curr.css(style);
        console.log();
        if(i<list.length-1){
            setTimeout(function(){
                next(++i);
            },list[i+1].time||2000);
        }
    }
    next();
</script>

</html>